<template>
  <el-card>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
      <el-form-item label="用户昵称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item label="用户密码" prop="email">
        <el-input show-password v-model="ruleForm.password" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm('ruleForm')">
          重置
        </el-button>
        <el-button type="primary" @click="updateConfirm('ruleForm')">
          立即更新
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import md5 from 'md5'

export default {
  name: 'UserEdit',
  data() {
    return {
      ruleForm: {
        id: this.$route.query.id,
        name: '',
        email: '',
        // password: '',
        status: 1,
      },
      rules: {
        name: [{ message: '请输入用户名称', trigger: 'blur' }],
        email: [{ message: '请输入用户邮箱', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.getUser(this.$route.query.id)
  },
  methods: {
    // 提交表单
    submitForm(formName) { },
    // 获取用户信息
    async getUser(id) {
      this.$api.httpUserInfo(id).then((res) => {
        if (res.code == 200) {
          this.ruleForm.name = res.data.name
          this.ruleForm.email = res.data.email
          this.ruleForm.status = res.data.status
        }
      })
    },
    // 更新用户再次确认
    updateConfirm(formName) {
      this.updateUser()
    },
    // 更新用户信息
    async updateUser() {
      // if (this.ruleForm.password && this.ruleForm.password.length > 0) this.ruleForm.password = md5(this.ruleForm.password)
      const res = await this.$api.httpUserUpdate(this.ruleForm)
      const { code, data } = res
      if (code == 200) {
        this.$message.success('更新成功')
        this.getUser()
      }
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style scoped lang="scss">
</style>
